<template>
  <div>
    <el-row type="flex" justify="start">
      <div v-for="(item, i) in searchData" :key="i">
        <span class="label">{{ item.label }}:</span>
        <el-input
          v-if="item.type === 'input'"
          v-model="info[item.name]"
          :placeholder="'请输入' + item.label"
          class="input"
          size="small"
          @keyup.enter.native="onSearch"
        />
        <el-date-picker
          v-if="item.type === 'timer'"
          v-model="timer"
          size="small"
          class="input"
          :type="typeof item.name !== 'string' ? 'datetimerange' : 'datetime'"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="
            () => {
              if (!timer) {
                info[item.name[0]] = '';
                info[item.name[1]] = '';
              }
              info[item.name[0]] = timer[0];
              info[item.name[1]] = timer[1];
            }
          "
        />
        <el-select
          v-if="item.type === 'select'"
          v-model="info[item.name]"
          class="input"
          size="small"
          :placeholder="'请选择' + item.label"
        >
          <el-option
            v-for="v in item.options"
            :key="item.handler ? v[item.handler.value] : v.value"
            :label="item.handler ? v[item.handler.label] : v.label"
            :value="item.handler ? v[item.handler.value] : v.value"
          />
        </el-select>
      </div>
      <el-button type="primary" size="small" @click="onSearch">查询</el-button>
    </el-row>
    <el-divider />
  </div>
</template>

<script>
export default {
  props: {
    searchData: Array
  },
  data() {
    return {
      timer: '',
      info: {}
    }
  },
  methods: {
    onSearch() {
      this.$emit('search', this.info)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  padding-right: 0px;
}
.label {
  padding-right: 10px;
  line-height: 32px;
  font-size: 14px;
}
.input {
  width: 250px !important;
  margin-right: 10px;
}
</style>

